import { memo, useMemo, useState } from "react";
import "@/styles/file/upload.scss";
import { FileIconImg } from "@/components/file/fileIcon";
import { ArrowUpOutlined, PauseCircleOutlined, PlayCircleOutlined, CloseCircleOutlined } from "@ant-design/icons";
import { statusEnum } from "@/utils/file";
import { byteFormate } from "@/utils/formate";
import PropTypes from "prop-types";

const FileUploadListComponent = ({ items }) => {
  const [collapse, setCollapse] = useState(false);
  const uploadList = useMemo(() => items, [items]);

  const progress = useMemo(() => {
    if (items.length === 0) return 0;
    let [total, count] = [0, 0];
    for (let i = 0; i < items.length; i++) {
      if (items[i].status !== statusEnum.SUCCESS) {
        count++;
        total += items[i].uploadProgress;
      }
    }
    return count ? Math.floor(total / count) : 0;
  }, [items]);

  const uploading = useMemo(() => {
    return !!items.find((v) => v.status === statusEnum.LOADING || v.status === statusEnum.UPLOADING);
  }, [items]);

  const handleCondition = (condition) => {
    condition = Array.isArray(condition) ? condition : [condition];
    return uploadList.findIndex((v) => condition.includes(v.status)) !== -1;
  };

  return uploadList.length ? (
    <div className={`file-upload-list-container${collapse ? " collapse" : ""}`}>
      <div
        className="collapse-card"
        style={{ "--progress": `${progress || 0}%` }}
        onClick={() => setCollapse(!collapse)}
      >
        <ArrowUpOutlined className={`status-icon${uploading ? " uploading" : ""}`} />
        <div className="description">正在上传</div>
        <div className="action">{uploading ? <PauseCircleOutlined /> : <PlayCircleOutlined />}</div>
        <div className="action">
          <CloseCircleOutlined />
        </div>
      </div>
      <div className="dropdown-container">
        <div className="upload-list">
          {uploadList.map((item) => (
            <div
              className={`upload-list-item${handleCondition(statusEnum.SUCCESS) ? " upload-success" : ""}`}
              key={item.hash}
              style={{
                "--before-progress": `${item.sliceProgress || 0}%`,
                "--after-progress": `${item.uploadProgress || 0}%`,
              }}
            >
              <div className="icon">
                <FileIconImg type={item.suffix} />
              </div>
              <div className="description">
                <div className="fileName">{item.name}</div>
                <div className="info">
                  {byteFormate(item.size)} {item.statusName} {item.speed}
                </div>
              </div>
              <div className="aciton-card">
                {!handleCondition([statusEnum.SUCCESS, statusEnum.COMBINED]) && (
                  <div className="action">{uploading ? <PauseCircleOutlined /> : <PlayCircleOutlined />}</div>
                )}
                <div className="action">
                  <CloseCircleOutlined />
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  ) : (
    <></>
  );
};
FileUploadListComponent.propTypes = {
  items: PropTypes.array.isRequired,
};

export default memo(FileUploadListComponent);
